<template>
  <!-- 基本文本骨架 -->
  <display-component :raw-html="rawHtml_1">
    <vi-skeleton variant="text" />
  </display-component>

  <display-component :raw-html="rawHtml_2">
    <!-- 圆形头像骨架 -->
    <vi-skeleton variant="circle" width="40px" />
    <!-- 矩形骨架 -->
    <vi-skeleton variant="rect" width="300px" height="200px" />

  </display-component>


  <display-component :raw-html="rawHtml_3">
    <!-- 多行文本骨架 -->
    <vi-skeleton :rows="4" row-height="16px" row-spacing="10px" />
    <!-- 带动画的骨架 -->
    <vi-skeleton :rows="3" animated />
  </display-component>

  <!-- 自定义骨架内容 -->
  <display-component :raw-html="rawHtml_4">
    <div>
      <vi-skeleton-loader :loading="loading">
        <template #skeleton>
          <vi-skeleton variant="circle" width="80px" height="80px" />
          <vi-skeleton variant="text" width="120px" style="margin-top: 16px;" />
          <vi-skeleton variant="text" width="80px" style="margin-top: 8px;" />
        </template>

        <img class="avatar" />
        <h3>xwq</h3>
        <p>This is a skeleton page.</p>
      </vi-skeleton-loader>
    </div>
  </display-component>
</template>


<script setup lang="ts">
import DisplayComponent from '@/layouts/DisplayComponent.vue';
import { ref } from 'vue';
const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 3000);
const rawHtml_1 = `
<template>
  <vi-skeleton variant="text" />
</template>
`
const rawHtml_2 = `
<template>
  <vi-skeleton variant="circle" width="40px" />
  <vi-skeleton variant="rect" width="300px" height="200px" />
</template>
`

const rawHtml_3 = `
<template>
    <vi-skeleton :rows="4" row-height="16px" row-spacing="10px" />
    <vi-skeleton :rows="3" animated />
</template>
`
const rawHtml_4 = `
<template>
<div>
  <vi-skeleton-loader :loading="loading">
    <template #skeleton>
      <vi-skeleton variant="circle" width="80px" height="80px" />
      <vi-skeleton variant="text" width="120px" style="margin-top: 16px;" />
      <vi-skeleton variant="text" width="80px" style="margin-top: 8px;" />
    </template>

    <img class="avatar" />
    <h3>xwq</h3>
    <p>This is a skeleton page.</p>
  </vi-skeleton-loader>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 3000);
<\/script>
`

</script>
